<template>
  <a-card class="fromBox" title="基金申报表单">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
<<<<<<< HEAD
        <a-button size="small" @click="resetForm">
          <RollbackOutlined />
        </a-button>
=======
        <a-button size="small" @click="resetForm"> <RollbackOutlined /></a-button>
>>>>>>> yx
      </a-tooltip>
    </template>
    <a-steps :current="current" :items="items" type="navigation" @change="StepsChange"></a-steps>
    <div class="steps-content">
<<<<<<< HEAD
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
        labelWrap="true">
        <a-form-item label="父协议" name="blapplyname" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blapplyname" placeholder="请选择" mode="multiple" :showSearch="false"
            allowClear>
            <a-select-option :value="item.blagreementname" v-for="(item, index) in Father">{{ item.blagreementname
              }}</a-select-option>
=======
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
        <a-form-item label="父协议" name="blapplyname" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blapplyname" placeholder="请选择" mode="multiple" :showSearch="false" allowClear>
            <a-select-option :value="item.blagreementname" v-for="(item, index) in Father">{{ item.blagreementname }}</a-select-option>
>>>>>>> yx
          </a-select>
        </a-form-item>
        <a-form-item label="项目名称" name="blapplyprojectname" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blapplyprojectname" placeholder="请填写" />
        </a-form-item>
        <a-form-item label="项目编号" name="blext2" v-show="steps[current].title == '第一步'" v-if="formState.blext2">
          <a-input v-model:value="formState.blext2" placeholder="请填写" disabled />
        </a-form-item>
        <a-form-item label="项目负责人" name="blprojectmanagepeople" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojectmanagepeople" placeholder="请选择" allowClear>
<<<<<<< HEAD
            <a-select-option :value="item.blleadername" v-for="(item, index) in People">{{ item.blleadername
              }}</a-select-option>
=======
            <a-select-option :value="item.blleadername" v-for="(item, index) in People">{{ item.blleadername }}</a-select-option>
>>>>>>> yx
          </a-select>
        </a-form-item>
        <a-form-item label="项目联系人" name="blprojectcontactpeople" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojectcontactpeople" placeholder="请选择" allowClear @change="changPhone">
<<<<<<< HEAD
            <a-select-option :value="item.blleadername" v-for="(item, index) in People">{{ item.blleadername
              }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申请经费(保留小数点两位)" name="blprojectmoney" v-show="steps[current].title == '第一步'">
          <a-input-number v-model:value="formState.blprojectmoney" placeholder="请填写" :step="0.01" :min="0"
            style="width: 200px" />
=======
            <a-select-option :value="item.blleadername" v-for="(item, index) in People">{{ item.blleadername }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申请经费(保留小数点两位)" name="blprojectmoney" v-show="steps[current].title == '第一步'">
          <a-input-number v-model:value="formState.blprojectmoney" placeholder="请填写" :step="0.01" :min="0" style="width: 200px" />
>>>>>>> yx
          <span style="color: red">(单位/元)</span>
        </a-form-item>
        <a-form-item label="受益范围" name="blprojectbenefitpeoplerange" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blprojectbenefitpeoplerange" placeholder="请填写" />
        </a-form-item>
        <a-form-item label="拟受益人数(人)" name="blprojectbenefitpeoplenumber" v-show="steps[current].title == '第一步'">
<<<<<<< HEAD
          <a-input-number v-model:value="formState.blprojectbenefitpeoplenumber" placeholder="请填写" :min="0"
            style="width: 200px" />
=======
          <a-input-number v-model:value="formState.blprojectbenefitpeoplenumber" placeholder="请填写" :min="0" style="width: 200px" />
>>>>>>> yx
        </a-form-item>
        <a-form-item label="项目类别" name="blprojecttype" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojecttype" placeholder="请选择" allowClear>
            <a-select-option :value="0">奖学金</a-select-option>
            <a-select-option :value="1">助学金</a-select-option>
            <a-select-option :value="2">奖教金</a-select-option>
            <a-select-option :value="3">学生创新创业基金</a-select-option>
            <a-select-option :value="4">事业发展基金</a-select-option>
            <a-select-option :value="5">学术论坛</a-select-option>
            <a-select-option :value="6">教师发展基金</a-select-option>
            <a-select-option :value="7">物质设备</a-select-option>
            <a-select-option :value="8">学生发展基金</a-select-option>
            <a-select-option :value="9">双联活动专款</a-select-option>
            <a-select-option :value="10">社会公益事业</a-select-option>
            <a-select-option :value="11">公共服务体系建设</a-select-option>
            <a-select-option :value="12">校园活动</a-select-option>
            <a-select-option :value="13">救助基金</a-select-option>
            <a-select-option :value="14">学科建设</a-select-option>
            <a-select-option :value="15">其他</a-select-option>
          </a-select>
        </a-form-item>
<<<<<<< HEAD
        <a-form-item label="其他项目类别" name="blothertype" v-show="steps[current].title == '第一步'"
          :rules="[{ required: formState.blprojecttype == 15 ? true : false, message: '请填写其他项目类别' }]"
          v-if="formState.blprojecttype == 15">
=======
        <a-form-item
          label="其他项目类别"
          name="blothertype"
          v-show="steps[current].title == '第一步'"
          :rules="[{ required: formState.blprojecttype == 15 ? true : false, message: '请填写其他项目类别' }]"
          v-if="formState.blprojecttype == 15"
        >
>>>>>>> yx
          <a-input v-model:value="formState.blothertype" placeholder="请填写" />
        </a-form-item>
        <a-form-item label="起止时间" name="Time" v-show="steps[current].title == '第一步'">
          <a-range-picker v-model:value="formState.Time" format="YYYY-MM-DD" @change="onChangeRangeDate" />
        </a-form-item>
        <a-form-item label="是否有其他资金支持" name="blprojectothermoney" v-show="steps[current].title == '第一步'">
          <a-radio-group v-model:value="formState.blprojectothermoney">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否有志愿者" name="blprojectvolunteer" v-show="steps[current].title == '第一步'">
          <a-radio-group v-model:value="formState.blprojectvolunteer" @change="getPeoeple">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
<<<<<<< HEAD
        <a-form-item label="志愿者人数" name="blprojectvolunteernum" v-show="steps[current].title == '第一步'"
          v-if="formState.blprojectvolunteer == 1"
          :rules="[{ required: formState.blprojectvolunteer == 1 ? true : false, message: '请填写志愿者人数' }]">
          <a-input-number v-model:value="formState.blprojectvolunteernum" placeholder="请填写" style="width: 150px"
            :min="0" />
=======
        <a-form-item
          label="志愿者人数"
          name="blprojectvolunteernum"
          v-show="steps[current].title == '第一步'"
          v-if="formState.blprojectvolunteer == 1"
          :rules="[{ required: formState.blprojectvolunteer == 1 ? true : false, message: '请填写志愿者人数' }]"
        >
          <a-input-number v-model:value="formState.blprojectvolunteernum" placeholder="请填写" style="width: 150px" :min="0" />
>>>>>>> yx
          <span>(人)</span>
        </a-form-item>
        <div class="jianjie" v-show="steps[current].title == '第二步'">
          <span>
            一、项目简介和创新点分析（请用一段话简明扼要的语言概括项目的关键内容，然后分点列出主要创新性或者项目亮点。阿拉伯数字后面请用“.”——即英文输入模式下的点，不能使用逗号或顿号。）
          </span>
          <a-form-item label="" name="blprojectprofile" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectprofile" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第二步'">
          <span> 二、项目方案（可包括项目实施目的、背景、前期准备、目标任务、行动方案，可另附页。） </span>
          <a-form-item label="" name="blprojectplan" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectplan" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第三步'">
          <span> 三、项目的可行性分析（可从人、财、物三方面分析项目的可行性。） </span>
          <a-form-item label="" name="blprojectfeasibility" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectfeasibility" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第三步'">
          <span> 四、项目进度安排（300-500字，包括进度计划安排，实施阶段和步骤等） </span>
          <a-form-item label="" name="blprojectspeed" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectspeed" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第四步'">
          <span> 五、项目完成预期效果与形式 </span>
          <a-form-item label="" name="blprojecteffects" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojecteffects" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第四步'">
          <span> 六 、经费使用计划（如有其它资金支持，请在经费使用计划中注明。 </span>
          <a-form-item label="" name="blmoney" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blmoney" :rows="12" placeholder="请填写" />
          </a-form-item>
        </div>
        <a-form-item label="请选择项目是否提交审核" name="blapplyprojectapplystatus" v-show="steps[current].title == '第五步'">
          <a-select v-model:value="formState.blapplyprojectapplystatus" placeholder="请选择">
            <a-select-option :value="0">暂存</a-select-option>
            <a-select-option :value="1">提交</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
    <div class="steps-action">
      <a-space>
<<<<<<< HEAD
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          <ArrowLeftOutlined />上一步
        </a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="onSubmit"> 提交 </a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步
          <ArrowRightOutlined />
        </a-button>
=======
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"><ArrowLeftOutlined />上一步</a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="onSubmit"> 提交 </a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步<ArrowRightOutlined /></a-button>
>>>>>>> yx
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, onMounted, defineProps, toRaw, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import { Instantly } from '../../../api/instantly/instantly-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import dayjs from 'dayjs';
  import { useUserStore } from '../../../store/modules/system/user';
  import { storeToRefs } from 'pinia';
  const mainStore = useUserStore();
  const { blsysuserid } = storeToRefs(mainStore);
  //  父级协议
  const Father = ref([]);
  async function getInitFarter() {
    let obj = {
      id: blsysuserid.value,
    };

    try {
      let res = await Instantly.FoundFarter(obj);
      Father.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //负责人
  const People = ref([]);
  async function getInitPeople() {
    try {
      let res = await Instantly.FoundLxiren();
      People.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  //  步骤条
  const current = ref(0);
  //点击步骤条的事件
  function StepsChange(e) {
    current.value = e;
  }
  //前进
  const next = () => {
    current.value++;
  };
  //后退
  const prev = () => {
    current.value--;
  };
  //步骤条标题
  const steps = [
    {
      title: '第一步',
    },
    {
      title: '第二步',
    },
    {
      title: '第三步',
    },
    {
      title: '第四步',
    },
    {
      title: '第五步',
    },
  ];
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };
  const formState = ref({});
  const rules = {
    blapplyname: [
      {
        required: true,
        message: '请选择父协议',
        trigger: 'change',
      },
    ],
    blapplyprojectname: [
      {
        required: true,
        message: '请填写项目名称',
        trigger: 'change',
      },
    ],
    blprojectmanagepeople: [
      {
        required: true,
        message: '请填写项目负责人',
        trigger: 'change',
      },
    ],
    blprojectcontactpeople: [
      {
        required: true,
        message: '请填写项目联系人',
        trigger: 'change',
      },
    ],
    blprojectmoney: [
      {
        required: true,
        message: '请填写申请经费',
        trigger: 'change',
      },
      {
        validator: (rule, value) => {
          if (value == 0) {
            return Promise.reject('请输入正确的经费金额');
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
    blprojectbenefitpeoplerange: [
      {
        required: true,
        message: '请填写受益范围',
        trigger: 'blur',
      },
    ],
    blprojectbenefitpeoplenumber: [
      {
        required: true,
        message: '请填写拟受益人数',
        trigger: 'blur',
      },
      {
        validator: (rule, value) => {
          if (value == 0) {
            return Promise.reject('请输入正确的拟受益人数');
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
    blprojecttype: [
      {
        required: true,
        message: '请选择项目类别',
        trigger: 'blur',
      },
    ],
    Time: [
      {
        required: true,
        message: '请选择起止日期',
        trigger: 'change',
      },
    ],
    blprojectothermoney: [
      {
        required: true,
        message: '请选择是否有其他资金支持',
        trigger: 'blur',
      },
    ],
    blprojectvolunteer: [
      {
        required: true,
        message: '请选择是否有志愿者',
        trigger: 'blur',
      },
    ],
    blprojectprofile: [
      {
        required: true,
        message: '请填写项目简介',
        trigger: 'blur',
      },
    ],
    blprojectplan: [
      {
        required: true,
        message: '请填写项目方案',
        trigger: 'blur',
      },
    ],
    blprojectfeasibility: [
      {
        required: true,
        message: '请填写项目可行性分析',
        trigger: 'blur',
      },
    ],
    blprojectspeed: [
      {
        required: true,
        message: '请填写项目项目进度安排',
        trigger: 'blur',
      },
    ],
    blprojecteffects: [
      {
        required: true,
        message: '请填写项目完成预期效果与形式',
        trigger: 'blur',
      },
    ],
    blmoney: [
      {
        required: true,
        message: '请填写项目资金使用计划',
        trigger: 'blur',
      },
    ],
    blapplyprojectapplystatus: [
      {
        required: true,
        message: '请选择项目审核状态',
        trigger: 'blur',
      },
    ],
  };
  const props = defineProps({
    DateId: String,
  });
  //获取项目详情

  const dateFormat = 'YYYY-MM-DD';
  async function getInitDate() {
    try {
      let blinfoid = props.DateId;
      let res = await Instantly.detailApi(blinfoid);
      formState.value = res.blapplyprojectinfo;
      formState.value.blapplyname = res.blapplyprojectinfo.blapplyname.split(',');
      formState.value.Time = [
        dayjs(res.blapplyprojectinfo.blprojectdatestart, dateFormat),
        dayjs(res.blapplyprojectinfo.blprojectdateend, dateFormat),
      ];
<<<<<<< HEAD
    } catch (error) { }
=======
    } catch (error) {}
>>>>>>> yx
  }
  // 获取日期
  function onChangeRangeDate(value, dateString) {
    formState.value.blprojectdatestart = dateString[0];
    formState.value.blprojectdateend = dateString[1];
  }
  //获取联系人名称
  function changPhone(value) {
    console.log(value, 'e----------');
    const PeopleList = People.value.find((item) => item.blleadername == value);
    console.log(PeopleList);
    if (PeopleList) {
      formState.value.blprojectcontactpeoplephone = PeopleList.blleaderphone;
    } else {
      formState.value.blprojectcontactpeoplephone = '';
    }
  }
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
        let queryForm = { ...toRaw(formState.value) };
        queryForm.blapplyname = queryForm.blapplyname.join(',');
        delete queryForm.Time;
        if (queryForm.blprojecttype != 15) {
          queryForm.blothertype = '';
        }
        // 开始 blprojectdatestart
        // 结束 blprojectdateend
        if (queryForm.blprojectvolunteer == 1) {
          if (queryForm.blprojectvolunteernum) {
            console.log(queryForm, '进入');
            getUpdate(queryForm);
          } else {
            message.warning('请正确填写志愿者人数');
          }
        } else {
          getUpdate(queryForm);
        }
      })
      .catch((error) => {
        console.log(error);
        message.warning('申报表单有未填或者格式不正确的项');
      });
  };
  //  提交方法
  function getUpdate(queryForm) {
    Instantly.updateFound(queryForm)
      .then((res) => {
        message.success('修改成功');
        resetForm();
      })
      .catch((e) => {
        smartSentry.captureError(e);
      });
  }

  //监听志愿者人数的方法
  function getPeoeple(e) {
    console.log(e.target.value);
    if (e.target.value == 0) {
      formState.value.blprojectvolunteernum = null;
    }
  }
  onMounted(() => {
    getInitDate();
    getInitFarter();
    getInitPeople();
  });
  const emit = defineEmits();
  const resetForm = () => {
    let obj = {
      type: 6,
    };
    emit('getBlack', obj);
  };
</script>

<style lang="scss" scoped>
  .steps-content {
    width: 100%;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 500px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
<<<<<<< HEAD

  .fromBox {}

=======
  .fromBox {
  }
>>>>>>> yx
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
<<<<<<< HEAD
</style>
=======
</style>
>>>>>>> yx
